<ons-page id="pullHookPage">
    <ons-toolbar>
        <div class="center">Pull Hook 下拉刷新</div>
    </ons-toolbar>

    <div class="page__background"></div>
    <div class="page__content">
        <ons-pull-hook id="pullHook">
            下拉刷新
        </ons-pull-hook>

        <div style="padding: 20px;">
            <h3>下拉刷新示例</h3>
            <div class="code-example-container">
                <div class="code-demo-area">
                    <p style="color: #666; line-height: 1.6;">
                        向下拖动页面可以触发刷新操作。
                    </p>
                    <ons-card style="margin-top: 20px;">
                        <div class="title">
                            <ons-icon icon="md-info" style="color: #4a90e2;"></ons-icon>
                            使用说明
                        </div>
                        <div class="content">
                            <p style="margin: 5px 0;">1. 在页面顶部向下拖动</p>
                            <p style="margin: 5px 0;">2. 看到"释放刷新"提示后松开</p>
                            <p style="margin: 5px 0;">3. 等待刷新完成</p>
                        </div>
                    </ons-card>
                </div>
                <div class="code-actions" onclick="toggleCode('pullhook-code')">
                    <div class="code-actions-left">
                        <ons-icon id="icon-pullhook-code" icon="md-chevron-down"></ons-icon>
                        <span>查看代码</span>
                    </div>
                    <div class="code-actions-right">
                        <button class="code-action-btn" id="copy-btn-pullhook-code" onclick="event.stopPropagation(); copyCode('pullhook-code')">
                            <ons-icon icon="md-copy"></ons-icon>
                            <span class="btn-text">复制</span>
                        </button>
                    </div>
                </div>
                <div class="code-display" id="code-pullhook-code">
                    <pre><code id="code-content-pullhook-code">&lt;!-- HTML --&gt;
&lt;ons-pull-hook id="pullHook"&gt;
    下拉刷新
&lt;/ons-pull-hook&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
var pullHook = document.getElementById('pullHook');

// 监听状态变化
pullHook.addEventListener('changestate', function(e) {
    var message = '';
    switch (e.state) {
        case 'initial':
            message = '下拉刷新';
            break;
        case 'preaction':
            message = '释放刷新';
            break;
        case 'action':
            message = '加载中...';
            break;
    }
    pullHook.innerHTML = message;
});

// 监听下拉动作
pullHook.onAction = function(done) {
    // 模拟网络请求
    setTimeout(function() {
        // 更新数据
        console.log('刷新完成');
        
        // 完成刷新
        done();
    }, 1500);
};
&lt;/script&gt;</code></pre>
                </div>
            </div>

            <h3 style="margin-top: 30px;">内容列表</h3>
            <ons-list id="contentList">
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 1</span>
                        <span class="list-item__subtitle" id="time1">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 2</span>
                        <span class="list-item__subtitle" id="time2">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 3</span>
                        <span class="list-item__subtitle" id="time3">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 4</span>
                        <span class="list-item__subtitle" id="time4">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 5</span>
                        <span class="list-item__subtitle" id="time5">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 6</span>
                        <span class="list-item__subtitle" id="time6">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 7</span>
                        <span class="list-item__subtitle" id="time7">最后更新: --</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="center">
                        <span class="list-item__title">内容项 8</span>
                        <span class="list-item__subtitle" id="time8">最后更新: --</span>
                    </div>
                </ons-list-item>
            </ons-list>

            <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
                <h4>刷新统计</h4>
                <p style="margin: 10px 0;">刷新次数: <span id="refreshCount">0</span></p>
                <p style="margin: 10px 0;">最后刷新: <span id="lastRefresh">未刷新</span></p>
            </div>
        </div>
    </div>

    <script>
        var refreshCount = 0;

        document.addEventListener('init', function(event) {
            if (event.target.matches('#pullHookPage')) {
                var pullHook = document.getElementById('pullHook');
                
                if (pullHook) {
                    // 监听状态变化
                    pullHook.addEventListener('changestate', function(e) {
                        var message = '';
                        switch (e.state) {
                            case 'initial':
                                message = '下拉刷新';
                                break;
                            case 'preaction':
                                message = '释放刷新';
                                break;
                            case 'action':
                                message = '加载中...';
                                break;
                        }
                        pullHook.innerHTML = message;
                    });

                    // 监听下拉动作
                    pullHook.onAction = function(done) {
                        // 模拟网络请求
                        setTimeout(function() {
                            refreshCount++;
                            var now = new Date();
                            var timeString = now.getHours() + ':' + 
                                            (now.getMinutes() < 10 ? '0' : '') + now.getMinutes() + ':' + 
                                            (now.getSeconds() < 10 ? '0' : '') + now.getSeconds();
                            
                            // 更新所有时间戳
                            for (var i = 1; i <= 8; i++) {
                                var timeElement = document.getElementById('time' + i);
                                if (timeElement) {
                                    timeElement.textContent = '最后更新: ' + timeString;
                                }
                            }
                            
                            // 更新统计信息
                            document.getElementById('refreshCount').textContent = refreshCount;
                            document.getElementById('lastRefresh').textContent = timeString;
                            
                            // 完成刷新
                            done();
                        }, 1500);
                    };
                }
            }
        });
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
